<template>
  <div>
    <Bluetable ref="blueTable" :t-head="tHead" :t-data="tableData" :child-open="childOpen" @childOpenData="setTrue" />
    <pagination :total="query.total" :page.sync="query.page" :limit.sync="query.limit" />
    <el-dialog title="回复信息详细" :visible.sync="childOpen">
      <div style=" height: 500px">
        <el-scrollbar style="height:100%">
          <el-timeline>
            <el-timeline-item timestamp="2018/4/12 20:46" placement="top">
              <el-card>
                <div class="card-wrapper">
                  <div class="card-left">
                    <!--                头像区域-->
                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
                  </div>
                  <div class="card-right">
                    <div class="card-item">
                      <div class="card-name">用户名</div>
                      <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium consequuntur minima minus placeat praesentium quidem quisquam quos repellendus soluta?</div>
                    </div>
                    <div class="card-btns">
                      <el-button size="mini" type="success">通过</el-button>
                      <el-button size="mini" type="danger">不通过</el-button>
                    </div>
                    <div class="card-result">
                      <el-tag type="success" size="mini">审核通过</el-tag>
                      <el-tag type="info" size="mini">未审核</el-tag>
                      <el-tag type="danger" size="mini">审核不通过</el-tag>
                    </div>
                  </div>
                </div>

              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/12 20:46" placement="top">
              <el-card>
                <div class="card-wrapper">
                  <div class="card-left">
                    <!--                头像区域-->
                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
                  </div>
                  <div class="card-right">
                    <div class="card-item">
                      <div class="card-name">用户名</div>
                      <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium consequuntur minima minus placeat praesentium quidem quisquam quos repellendus soluta?</div>
                    </div>
                    <div class="card-btns">
                      <el-button size="mini" type="success">通过</el-button>
                      <el-button size="mini" type="danger">不通过</el-button>
                    </div>
                    <div class="card-result">
                      <el-tag type="success" size="mini">审核通过</el-tag>
                      <el-tag type="info" size="mini">未审核</el-tag>
                      <el-tag type="danger" size="mini">审核不通过</el-tag>
                    </div>
                  </div>
                </div>

              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/12 20:46" placement="top">
              <el-card>
                <div class="card-wrapper">
                  <div class="card-left">
                    <!--                头像区域-->
                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
                  </div>
                  <div class="card-right">
                    <div class="card-item">
                      <div class="card-name">用户名</div>
                      <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium consequuntur minima minus placeat praesentium quidem quisquam quos repellendus soluta?</div>
                    </div>
                    <div class="card-btns">
                      <el-button size="mini" type="success">通过</el-button>
                      <el-button size="mini" type="danger">不通过</el-button>
                    </div>
                    <div class="card-result">
                      <el-tag type="success" size="mini">审核通过</el-tag>
                      <el-tag type="info" size="mini">未审核</el-tag>
                      <el-tag type="danger" size="mini">审核不通过</el-tag>
                    </div>
                  </div>
                </div>

              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Ptctable',
  data() {
    return {
      childOpen: false,
      query: {
        total: 100,
        page: 1,
        limit: 10
      },
      tHead: [
        {
          operate: ['审核'],
          label: '操作'
        },
        {
          prop: 'date',
          label: '咨询医师'
        },
        {
          prop: 'date',
          label: '问题'
        },
        {
          prop: 'date',
          label: '文件等级'
        },
        {
          prop: 'date',
          label: '文件备注'
        },
        {
          prop: 'date',
          label: '创建时间'
        }],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '111'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '111'
      }]
    }
  },
  methods: {
    setTrue(res) {
      var selectBtn = this.$refs.blueTable.selectBtn
      if (selectBtn === '审核') {
        this.childOpen = res
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/.el-card__body{
    padding: 10px;
  }
  /deep/.el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .card-wrapper{
    display: flex;
    .card-left{
      width: 65px;
      height: 65px;
      min-width: 65px;
      min-height: 65px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
    .card-right{
      margin-left: 20px;
      .card-name{
        font-size: 20px;
      }
      .card-content{
        padding: 5px 0;
        text-indent:2em;
      }
      .card-btns{
        padding: 5px 0;
      }
      .card-result{
        padding: 5px 0;
      }
    }
  }
</style>
